import React from 'react'
import './MyInfo.css'
import { Flex, Button } from 'antd-mobile';
import headPortrait from '../../img/title.png'
import * as api from '../../uitls/api'

class MyInfo extends React.Component {
    constructor() {
        super()
        this.state = {
            user_photo_url: '',
            user_name: '',
            user_num: '',
            user_id: ''
        }
    }
    // 我的收藏
    collect = () => {
        // eslint-disable-next-line no-useless-concat
        this.props.history.push({ pathname: '/Home/HCcollect' })
    }
    // 我的地址
    site = () => {
        this.props.history.push('/Home/HCsite')
    }
    // 我的会员
    vip = () => {
        this.props.history.push({ pathname: '/Home/HCvip/' + this.state.user_id })
    }
    // 基本信息
    essentialInformation = () => {
        this.props.history.push({ pathname: '/Home/HCinformation/' + this.state.user_id })
    }
    componentDidMount() {
        this.axios({
            url: api.GET_Querymy,
            method: 'get',
            params: {
                user_id: 1
            }
        }).then(data => {
            console.log(data);
            if (data.data.code === 200) {
                this.setState({
                    user_photo_url: data.data.data[0].user_photo_url,
                    user_name: data.data.data[0].user_name,
                    user_num: data.data.data[0].user_num,
                    user_id: data.data.data[0].user_id,
                })
            }
        })
    }
    render() {
        return (
            <div>
                <header className='info_header'>
                    <Flex>
                        <Flex.Item></Flex.Item>
                        <Flex.Item></Flex.Item>
                        <Flex.Item>
                            <div className='info_icon'>
                                {/* <i className='iconfont icon-shezhi' style={{ margin: '0 10px' }}></i> */}
                                <i className='iconfont icon-22' style={{ margin: '0 20px 0 10px' }}></i>
                            </div>
                        </Flex.Item>
                    </Flex>
                    <Flex>
                        <Flex.Item>
                            <div className='info_img' style={{ margin: 'auto' }}>
                                <img src={headPortrait} alt="" />
                            </div>
                        </Flex.Item>
                        <Flex.Item>
                            <div className='info_xinxi'>
                                <div>{this.state.user_name}</div>
                                <div>{this.state.user_num}</div>
                            </div>
                        </Flex.Item>
                        {/* <Flex.Item></Flex.Item> */}
                        <Flex.Item></Flex.Item>
                    </Flex>
                </header>
                <div className="info_content">
                    <Flex justify="center" style={{ textAlign: 'center' }}>
                        <Flex.Item>
                            <div onClick={this.collect}>
                                <div className='info_icon2'>
                                    <i className='iconfont icon-icon-1'></i>
                                </div>
                                <div>
                                    我的收藏
                                </div>
                            </div>
                        </Flex.Item>
                        <Flex.Item>
                            <div onClick={this.site}>
                                <div className='info_icon2'>
                                    <i className='iconfont icon-dizhi'></i>
                                </div>
                                <div>
                                    我的地址
                                </div>
                            </div>

                        </Flex.Item>
                        <Flex.Item>
                            <div onClick={this.vip}>
                                <div className='info_icon2'>
                                    <i className='iconfont icon-huiyuan2'></i>
                                </div>
                                <div>
                                    我的会员
                                </div>
                            </div>

                        </Flex.Item>
                        <Flex.Item>
                            <div onClick={this.essentialInformation}>
                                <div className='info_icon2'>
                                    <i className='iconfont icon-jibenxinxi'></i>
                                </div>
                                <div>
                                    基本信息
                                </div>
                            </div>
                        </Flex.Item>
                    </Flex>
                    <Flex style={{ marginTop: '10px' }}>
                        <Flex.Item>
                            <div className='info_wode'>
                                <div className='info_name'>
                                    我的资产
                                </div>
                            </div>
                        </Flex.Item>
                    </Flex>
                    <Flex justify="center" style={{ textAlign: 'center', marginTop: '20px' }}>
                        <Flex.Item>
                            <div className='info_icon2'>
                                <i className='iconfont icon-icon-1'></i>
                            </div>
                            <div>
                                红包
                            </div>
                        </Flex.Item>
                        <Flex.Item>
                            <div className='info_icon2'>
                                <i className='iconfont icon-dizhi'></i>
                            </div>
                            <div>
                                代金券
                            </div>
                        </Flex.Item>
                        <Flex.Item>
                            <div className='info_icon2'>
                                <i className='iconfont icon-huiyuan2'></i>
                            </div>
                            <div>
                                我的钱包
                            </div>
                        </Flex.Item>
                        <Flex.Item>
                            <div className='info_icon2'>
                                <i className='iconfont icon-jibenxinxi'></i>
                            </div>
                            <div>
                                余额
                            </div>
                        </Flex.Item>
                    </Flex>
                    <Flex style={{ marginTop: '10px' }}>
                        <Flex.Item>
                            <div className='info_wode'>
                                <div className='info_name'>
                                    更多推荐
                                </div>
                            </div>
                        </Flex.Item>
                    </Flex>
                    <Flex justify="center" style={{ textAlign: 'center', marginTop: '20px' }}>
                        <Flex.Item>
                            <div className='info_icon2'>
                                <i className='iconfont icon-icon-1'></i>
                            </div>
                            <div>
                                邀请有奖
                            </div>
                        </Flex.Item>
                        <Flex.Item>
                            <div className='info_icon2'>
                                <i className='iconfont icon-dizhi'></i>
                            </div>
                            <div>
                                商家入驻
                            </div>
                        </Flex.Item>
                        <Flex.Item>
                            <div className='info_icon2'>
                                <i className='iconfont icon-huiyuan2'></i>
                            </div>
                            <div>
                                骑手招募
                            </div>
                        </Flex.Item>
                        <Flex.Item>
                            <div className='info_icon2'>
                                <i className='iconfont icon-jibenxinxi'></i>
                            </div>
                            <div>
                                帮助与反馈
                            </div>
                        </Flex.Item>
                    </Flex>
                    <Flex>
                        <Flex.Item>
                            <div className='info_but'>
                                <Button type="primary" activeStyle={false}>退出账号</Button>
                            </div>
                        </Flex.Item>
                    </Flex>
                </div>

            </div>
        )
    }
}

export default MyInfo